<template>
  <div>
      <!-- 搜索框 -->
      <el-row class="searchBox">
          <el-col :span="17" >
            <el-input
                placeholder="请输入待查询的角色名"
                prefix-icon="el-icon-search"
                v-model="roleName"
                clearable
                @keyup.enter="search">
            </el-input>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" size="small" @click="search" class="button">搜索</el-button>
          </el-col>
          
      </el-row>

      <!-- 搜索结果 -->
      <el-row type="flex" justify="center">
          <el-col :span="20" class="searchResult">
            <transition 
                name="animate__animated animate__bounce"
                enter-active-class="animate__bounceInLeft"
            >   
                <!-- 检索失败 -->
                <div class="searchFailText" v-if="searchResult.length == 0 && searched">未检索到相关信息</div>
                <slot name='delete'></slot>
                <slot name='update'></slot>
            </transition>
          </el-col>
      </el-row>
  </div>
</template>

<script>
import "animate.css"
import {mapState} from 'vuex'
export default {
    data() {
        return {
            roleName:'',
            searched:false
        }
    },
    computed:{
        ...mapState({
            searchResult:(state)=>state.home.searchResult
        })
    },
    methods: {
        async search(){
            this.searched = true
            if(this.roleName.trim().length != 0){
                let nameObj = {}
                nameObj.name = this.roleName.trim()
                this.$store.dispatch("getSearchResult",nameObj)
            }else{
                this.$store.commit("GETSEARCHRESULT",[])
            }
        }
    },
    beforeDestroy(){
        this.$store.commit("GETSEARCHRESULT",[])
    }
}
</script>

<style scoped lang="less">
.searchBox{
    height: 90px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .el-col:not(:first-child){
        display: flex;
        justify-content: center;
    }
}
.searchResult{
    .searchFailText{
        height: 180px;
        border: 2px solid #b59b90;
        border-radius: 5px;
        color: #b59b90;
        text-align: center;
        line-height: 180px;
    }
}
</style>